<template>
  <div class="order">
    <van-nav-bar title="订单中心" left-text="" left-arrow @click-left="$router.go(-1)" />

    <van-tabs v-model="active" title-active-color="#DB5310" color="#DB5310" @change="onChange">
      <van-tab name="1" title="我的订单"></van-tab>
      <van-tab name="2" title="撤销订单"></van-tab>
    </van-tabs>

    <div v-if="active == '1'" class="list">
      <van-cell-group class="item" v-for="(item, index) in list" :key="index" inset @click="toDetail(item.order_id)">
        <van-cell title-class="shopname">
          <template #title>
            <img src="../assets/img/local.png" />
            <span>{{ item.get_shops.address }}</span>
          </template>
          <template #default>
            <span class="status" :style="`color:${color[item.sign]};`">{{ status[item.sign] }}</span>
          </template>
        </van-cell>
        <van-cell class="card" v-for="(goods, index2) in item.order_details" :key="index2">
          <van-card :num="goods.quantity" :desc="goods.product_describe" :title="goods.product_name" :thumb="domain + goods.cover_url">
            <template #price>
              <div class="price">
                ￥
                <span>{{ goods.sale_price }}</span>
              </div>
            </template>
          </van-card>
        </van-cell>
        <van-cell :title="item.time" :value="`总计：￥${item.pay_amount}`" title-class="time" value-class="total" />
        <van-cell class="footer">
          <template #title>
            <van-button type="primary" size="small" round plain @click.stop="showkefu = !showkefu">联系客服</van-button>
            <van-button v-if="item.sign == 3" type="primary" size="small" round plain @click.stop="onCancelOrder(item)">撤销订单</van-button>
            <van-button v-if="item.sign == 3" type="primary" size="small" round plain>修改订单</van-button>
            <van-button v-if="item.sign == 4" type="primary" size="small" round plain @click.stop="oneMore(item)">再来一单</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <div v-if="active == '2'" class="list">
      <van-cell-group class="item" v-for="(item, index) in list" :key="index" inset @click="toDetail(item.order_id)">
        <van-cell title-class="shopname">
          <template #title>
            <img src="../assets/img/local.png" />
            <span>{{ item.get_shops.address }}</span>
          </template>
          <template #default>
            <span class="status" :style="`color:${color[item.sign]};`">{{ status[item.sign] }}</span>
          </template>
        </van-cell>
        <van-cell class="card" v-for="(goods, index2) in item.order_details" :key="index2">
          <van-card :num="goods.quantity" :desc="goods.product_describe" :title="goods.product_name" :thumb="domain + goods.cover_url">
            <template #price>
              <div class="price">
                ￥
                <span>{{ goods.sale_price }}</span>
              </div>
            </template>
          </van-card>
        </van-cell>
        <van-cell :title="item.time" :value="`总计：￥${item.pay_amount}`" title-class="time" value-class="total" />
        <van-cell class="footer">
          <template #title>
            <van-button type="primary" size="small" round plain @click.stop="showkefu = !showkefu">联系客服</van-button>
            <van-button v-if="item.sign == 2 || item.sign == 3" type="primary" size="small" round plain @click.stop="onCancelOrder(item)">撤销订单</van-button>
            <van-button v-if="item.sign == 2 || item.sign == 3" type="primary" size="small" round plain>修改订单</van-button>
            <van-button v-if="item.sign == 4" type="primary" size="small" round plain @click.stop="oneMore(item)">再来一单</van-button>
            <van-button v-if="item.sign == 6" type="primary" size="small" round plain @click.stop="cancelRefund(item)">取消退款</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <van-empty v-if="list.length == 0" description="暂无订单" />

    <van-popup v-model="showkefu" round closeable>
      <img class="kefu" :src="domain + kefu" />
    </van-popup>
  </div>
</template>

<script>
import { Dialog } from "vant"
import { Toast } from "vant"

export default {
  data () {
    return {
      active: "1",
      list: [],
      status: { 1: "待支付", 2: "待配送", 3: "配送中", 4: "已完成", 6: "撤销中", 7: "已撤销" },
      color: { 2: "#000", 3: "#DB5310", 4: "#5f5f5f", 6: "#DB5310", 7: "#000" },
      kefu: this.$store.state.shop.kefu_image,
      showkefu: false,
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$axios
        .get(this.$api.getofflineorderlist, {
          params: {
            status: this.active,
          },
        })
        .then(res => {
          if (res.data.code == 1) {
            this.list = res.data.data.map(e => {
              return {
                ...e,
                time: this.$dayjs(e.order_time * 1000).format("YYYY-MM-DD HH:mm"),
                sign: e.order_status,
              }
            })
          }
        })
    },
    toDetail (id) {
      this.$router.push({ name: "orderDetail", query: { id } })
    },
    onChange () {
      this.list = []
      this.getList()
    },
    oneMore () {
      this.$router.push('/')
    },
    onCancelOrder (item) {
      Dialog.confirm({
        title: "提示",
        message: "确认撤销订单？",
      })
        .then(() => {
          this.$axios
            .post(this.$api.usercancel, {
              order_id: item.order_id,
            })
            .then(res => {
              if (res.data.code == 1) {
                this.list = []
                this.getList()
              } else {
                Toast.fail("操作失败")
              }
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    cancelRefund (item) {
      Dialog.confirm({
        title: "提示",
        message: "确认取消退款？",
      })
        .then(() => {
          this.$axios
            .post(this.$api.usercanceloperation, {
              order_id: item.order_id,
            })
            .then(res => {
              if (res.data.code == 1) {
                this.list = []
                this.getList()
              } else {
                Toast.fail("操作失败")
              }
            })
        })
        .catch(() => {
          // on cancel
        })
    },
  },
}
</script>

<style lang="less" scoped>
.order {
  padding-bottom: 20px;

  .van-tabs {
    height: 44px;
    margin-bottom: 10px;
  }

  .list {
    .item {
      margin: 0 10px 10px;

      .shopname {
        display: flex;
        align-items: center;
        flex: 4;

        img {
          margin-right: 10px;
          filter: grayscale(100%);
        }
      }

      .status {
        font-size: 16px;
        font-weight: bold;
      }

      .card {
        .van-card {
          padding: 0;
          background-color: #fff;

          .van-card__content {
            min-height: 50px;
          }

          .van-card__thumb {
            width: 68px;
            height: 68px;
          }

          .van-card__title {
            color: #494b4e;
            font-size: 16px;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .price {
            color: #5f5f5f;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }

      .time {
        color: #999999;
        font-size: 12px;
      }

      .total {
        color: #494b4e;
        font-size: 14px;
        font-weight: bold;
      }

      .footer {
        .van-cell__title {
          display: flex;
          justify-content: flex-end;

          .van-button {
            margin-left: 10px;
          }
        }
      }
    }
  }

  .kefu {
    display: block;
    width: 300px;
    height: 300px;
  }
}
</style>
